<template>
  <v-ons-page>
    <v-ons-toolbar>
      <div class="center">
        <div class="tab-bar">
          <button :class="tabbarIndex == 1 ? 'active':''" @click="selectTabbar({item:1})">
            全部
          </button>
          <button :class="tabbarIndex == 2 ? 'active':''" @click="selectTabbar({item:2})">
            待接单
          </button>
          <button :class="tabbarIndex == 3 ? 'active':''" @click="selectTabbar({item:3})">
            待收货
          </button>
          <button :class="tabbarIndex == 4 ? 'active':''" @click="selectTabbar({item:4})">
            已完成
          </button>
          <button :class="tabbarIndex == 5 ? 'active':''" @click="selectTabbar({item:5})">
            已取消
          </button>
        </div>
      </div>
    </v-ons-toolbar>

    <div class="container">
      <v-ons-pull-hook
        class="pull-hook"
        :action="loadItem"
        @changestate="state = $event.state"
      >
        <span v-show="state === 'initial'"> 下拉刷新  </span>
        <span v-show="state === 'preaction'"> 释放 </span>
        <span v-show="state === 'action'"> 加载中... </span>
      </v-ons-pull-hook>

      <div class="data-list">
        <div class="data-list-item" @click="enterPage({path:'/ConsumerOrderDetail'})">
          <div class="head">
            <h3 class="title">帮我取 <span class="danger">取消 ></span></h3>
          </div>
          <div class="body">
            <div class="info-item">
              <div class="side">
                <img class="time-icon" src="../../assets/resource/consumer/order_list/icon1.png" alt="">
              </div>
              <div class="info">
                <p>2018年1月10日 12:00:00</p>
              </div>
            </div>
            <div class="info-item">
              <div class="side">
                <img class="address-icon" src="../../assets/resource/consumer/order_list/icon2.png" alt="">
              </div>
              <div class="info">
                <p>地址1</p>
              </div>
            </div>
            <div class="info-item">
              <div class="side">
                <img class="address-icon" src="../../assets/resource/consumer/order_list/icon3.png" alt="">
              </div>
              <div class="info">
                <p>地址2</p>
              </div>
            </div>
          </div>
          <div class="footer">
            <div class="left">
              <span>订单编号：12345679879</span>
            </div>
            <div class="right">
              <span>订单金额：<strong>140.60元</strong></span>
            </div>
          </div>
        </div>

        <div class="data-list-item"  @click="enterPage({path:'/ConsumerOrderDetail'})">
          <div class="head">
            <h3 class="title">帮我取 <span class="success">成功 ></span></h3>
          </div>
          <div class="body">
            <div class="info-item">
              <div class="side">
                <img class="time-icon" src="../../assets/resource/consumer/order_list/icon1.png" alt="">
              </div>
              <div class="info">
                <p>2018年1月10日 12:00:00</p>
              </div>
            </div>
            <div class="info-item">
              <div class="side">
                <img class="address-icon" src="../../assets/resource/consumer/order_list/icon2.png" alt="">
              </div>
              <div class="info">
                <p>地址1</p>
              </div>
            </div>
            <div class="info-item">
              <div class="side">
                <img class="address-icon" src="../../assets/resource/consumer/order_list/icon3.png" alt="">
              </div>
              <div class="info">
                <p>地址2</p>
              </div>
            </div>
          </div>
          <div class="footer">
            <div class="left">
              <span>订单编号：12345679879</span>
            </div>
            <div class="right">
              <span>订单金额：<strong>140.60元</strong></span>
            </div>
          </div>
        </div>
      </div>
    </div>

  </v-ons-page>
</template>

<script>
  export default {
    data() {
      return {
        tabbarIndex: 1,
        state: 'initial',
        items: [1, 2, 3]
      };
    },
    methods: {
      loadItem(done) {
        setTimeout(() => {
          this.items = [...this.items, this.items.length + 1];
          done();
        }, 600);
      },
      enterPage({path:path}){
        this.$router.push({
          path:path
        });
      },
      selectTabbar({item: item}) {
        this.tabbarIndex = item;
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../assets/less/consumer/order-list.less";
</style>
